<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
		  <!-- slides -->
		  <swiper-slide v-for='item of list' :key="item.id">
		  	<img :src="item.imgUrl" class="swiper-img">

		  </swiper-slide>
		
		  <!-- Optional controls -->
		  <div class="swiper-pagination"  slot="pagination"></div>
		
		</swiper>
	</div>



</template>



<script>
	export default {
		name:'HomeSwiper',
		props:{
			list:Array
		},
		data() {
			return {
				swiperOption: {
					pagination:'.swiper-pagination', //这里pagination是插槽名，.swiper-pagination是类名
					loop:true ,  //决定是否循环轮播
					autoplay:2000
				}
			}
		},
		computed: {
			showSwiper() {
				return this.list.length;
			}
		}
	}

</script>
<!-- >>>的意思为穿透，即在类名为wrapper元素下的所有类名为>>>后面类名的元素都会应用这个样式 -->

<style lang='stylus' scoped>

	.wrapper >>> .swiper-pagination-bullet-active {
		background-color: #fff;
	}
	.swiper-img {
		width: 100%;
	}
	.wrapper {
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 31.25%;

	}


</style>